<!--
 * @Description: 媒体查询
 * @Author: rendc
 * @Date: 2025-09-22 09:57:15
 * @LastEditors: rendc
 * @LastEditTime: 2025-09-22 11:07:41
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>媒体查询</title>
  <!-- 媒体查询 外部样式表 -->
  <style>
    /* 响应式布局 - 媒体查询 */
    /* @media screen and (max-width:580px) {
      body {
        background-color: yellowgreen;
      }
    } */

    /* 适配宽度为375px的屏幕 - 内部样式表*/
    /* @media screen and (min-width:375px) and (max-width:375px) {
      body {
        background-color: blue;
      }
    } */

    /* 完全适配指定屏幕 */
  </style>
  <!-- <link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" /> -->

  <!-- 区分横屏还是竖屏 -->
  <!-- 横屏 -->
  <link rel="stylesheet" media="screen and (orientation: landscape)" href="landscape.css" />

  <!-- 竖屏 -->
  <link rel="stylesheet" media="screen and (orientation: portrait)" href="portrait.css" />

</head>

<body>
  媒体查询
</body>

</html>